<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-06-16 10:35:13
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-06-16 15:57:41
 * @FilePath: /XMate-h5/src/views/minutes/components/transfer/asrList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-auto flex-col">
    <VirtualList
      class="flex flex-auto"
      ref="virtualListRef"
      :data="listData"
      :containerHeight="listContainerHeight"
      :itemHeight="itemHeight"
      :bufferSize="5"
    >
      <template #default="{ item, index }">
        <KeywordView
          v-if="index == 0"
          class="mt-2 mb-3"
          @onClickKeyword="(v) => emit('onClickKeyword', v)"
        />
        <AsrResultCell
          :item="item"
          :index="index"
          :enableAsrOptimize="enableAsrOptimize"
          :keyword="searchKeyWords"
          :useRealTime="useRealTime"
          :is_active="activeIndex === index"
        />
      </template>
    </VirtualList>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount, defineProps, watch } from "vue";
import AsrResultCell from "./asrResultCell.vue";
import VirtualList from "@/components/VirtualList.vue";
import { useMinutesStore } from "@/store/modules/minutes/minutes";
import KeywordView from "./keywordView.vue";

const minutesStore = useMinutesStore();

const emit = defineEmits(["onClickKeyword"]);

const aiAsrList = computed(() => minutesStore.aiAsrList);
const asrList = computed(() => minutesStore.asrList);

const enableAsrOptimize = computed(() => {
  return minutesStore.enableAsrOptimize;
});

const useRealTime = computed(() => {
  return minutesStore.asrStore.needCalRealTime;
});

const activeIndex = computed(() => {
  return asrList.value.findIndex(
    (v) => minutesStore.playerTimeStamp >= v.bt && minutesStore.playerTimeStamp <= v.et
  );
});

const listData = computed(() => {
  let list = enableAsrOptimize.value ? aiAsrList.value : asrList.value;
  if (searchKeyWords.value.length === 0) {
    return list;
  }

  return list.filter((v) => {
    return v.txt.includes(searchKeyWords.value) || v.name.includes(searchKeyWords.value);
  });
});

const props = defineProps({
  searchValue: {
    type: String,
    default: "",
  },
});

const searchKeyWords = computed(() => props.searchValue);

// 虚拟列表配置
const itemHeight = 80; // 预估每项高度
const listContainerHeight = ref(400);

function calculateContainerHeight() {
  // 计算容器高度，减去头部/底部等固定区域
  const viewportHeight = window.innerHeight;
  // 这里可根据实际页面结构调整
  listContainerHeight.value = Math.max(viewportHeight - 200, 300);
}

onMounted(() => {
  calculateContainerHeight();
  window.addEventListener("resize", calculateContainerHeight);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", calculateContainerHeight);
});

const virtualListRef = ref();

defineExpose({
  scrollToIndex: (index: number) => {
    console.log("scrollToIndex: ", index);
    virtualListRef.value?.scrollToIndex(index);
  },
  scrollToItem: (item: any) => {
    virtualListRef.value?.scrollToItem(item);
  },
  listData: listData.value,
});

// 监听 activeIndex 变化
watch(activeIndex, (newIndex) => {
  if (newIndex >= 0 && virtualListRef.value?.scrollToIndex) {
    // 尝试传递 'center' 参数，如果 VirtualList 支持
    virtualListRef.value.scrollToIndex(newIndex, "center");
    // 如果不支持 'center'，你需要在 VirtualList 组件里实现居中逻辑
  }
});
</script>

<style scoped lang="less">
// 可根据需要添加样式
</style>
